<template>
    <div class="father">
        <!-- 左边主题+故事 -->
        <div class="item-left">
            <h1>{{infos.t_name}}</h1>
            <p class="content">{{infos.t_content}}</p>
            <h3 >主题下有{{storynum}}个故事</h3>
            <div  class="item-center" v-for="(info,index) in story" :key="index">
                <router-link :to="{ name: 'storyDetail', params: { id: info.story_id } }">
                <p>{{info.title}}</p>
                <div class="theme-title" >
                    <p><img :src="info.author_img"> </p>
                    <p>{{info.name}}</p>
                    <p>{{info.s_date}}</p>
                </div>
                
                <div class="text" v-html="info.s_content">{{info.s_content}}</div>
                </router-link>
                 <div class="tb">
                    <div class="tb1"><i class="iconfont icon-xihuan8"></i></div>
                    <div class="tb2"><i class="iconfont icon-shoucang3"></i></div>
                </div>
            </div>
        </div>
        <!-- 右边 交流互动 -->
        <div>
            <h1>主题交流区</h1>
            <el-button class="liuyan" type="text" @click="dialogVisible = true">写留言</el-button>
            <hr>
            <ul>
                <li class="talk" v-for="(com,index) in comments" :key="index">
                   <div>
                       <img class="tx" :src="com.user_img">
                   </div>
                   <div>
                       <div class="talk_name">
                            <p>{{com.user_name}}</p>
                            <p>{{com.date | date('yyyy-MM-dd')}}</p>
                       </div>
                       <div>
                           <p>{{com.talk_content}}</p>
                       </div>
                   </div> 
                </li>
            </ul>
        </div>

        <el-dialog
  title="发表留言"
  :visible.sync="dialogVisible"
  width="40%"
  >
  <span>请输入留言：</span>
  <textarea  class="myliuyan" v-model="liuyan" placeholder="输入留言内容" />
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCom()">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>

<script>
export default {
    name:'talking',
    data(){
        return{
            infos:[],
            id:"",
            storynum:'',
            story:[],
            comments:[],
            dialogVisible:false,
            liuyan:''
        }
    },
    methods:{
        addCom(){
            this.dialogVisible = false;
            this.tid = this.$route.params.id,
            this.$axios.get('/addComTheme.do?t_id='+this.tid+
            "&user_id="+this.id+
            "&talk_content="+this.liuyan).then((response) => {
            this.add = response.data;
            if(this.add>0){
                alert("添加成功！")
                this.$axios.get('/ThemeCommentList.do?t_id='+this.tid).then((response) => {
                this.comments=response.data;
        })
            }
        })
        .catch(function (error) {
            console.log(error);
        });
        },
    },
    mounted(){
        this.id=window.localStorage.getItem("uid");
        this.tid = this.$route.params.id,
        console.log(this.tid+'主题ID')
        this.$axios.get('/getThemeByid.do?t_id='+this.tid).then((response) => {
            this.infos=response.data;
        })
        .catch(function (error) {
            console.log(error);
        });

        this.$axios.get('/storyNum.do?t_id='+this.tid).then((response) => {
            this.storynum=response.data;
        })
        .catch(function (error) {
            console.log(error);
        });

        this.$axios.get('/getStoryByTheme.do?t_id='+this.tid).then((response) => {
            this.story=response.data;
        })
        .catch(function (error) {
            console.log(error);
        });

         this.$axios.get('/ThemeCommentList.do?t_id='+this.tid).then((response) => {
            this.comments=response.data;
        })
        .catch(function (error) {
            console.log(error);
        });

    }
}
</script>

<style scoped>
a{
    text-decoration: none;
}
.father{
    display: flex;
    padding-top: 50px;
}
.father>div:nth-child(1){
    width: 60%;
    padding-left: 50px;
    margin-right: 10px;
}
.father>div:nth-child(2){
    width: 40%;
    background-color: #f8f7f5;
    margin-left: 10px;
    margin-right: 50px;
}
.item-center{
    margin-top: 20px;
    width: 100%;
    background-color: #f8f7f5;
    padding: 50px;
}

.item-center p:nth-child(1){
    text-align-last: left;
    font-size: 25px;
    font-weight: 900;
    display: flex;
}
.text{
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 50px;
    word-break:break-word;
    text-align-last: left;

}
.tb{
    width: 100%;
    text-align: left;
    margin-top: 50px;
}
.tb1{
    display: inline-block;
    width: 65px;
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 100px;
    margin-right: 20px;
    line-height: 34px;
    text-align: center;   
   
}
.tb2{
    display: inline-block;
    width: 65px;
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 100px;
    text-align: center;
}
.icon-xihuan8{
    font-size: 25px;
    line-height: 34px;
    color: #ccc;

}
.icon-xihuan8:hover{
    font-size: 25px;
    line-height: 34px;
    color: rgba(253, 110, 110);
}
.icon-shoucang3{
    font-size: 25px;
    line-height: 34px;
    color: #ccc;
}
.icon-shoucang3:hover{
    font-size: 25px;
    line-height: 34px;
    color: rgb(101, 159, 255);
}
.talk{
    display: flex;
    border-bottom: 1px solid #000;
    margin-right: 20px;
    padding-top: 15px;
}
.talk>div:nth-child(1){
    width: 20%;
}
.talk>div:nth-child(2){
    width: 80%;
    text-align: left;
    padding-right: 20px;
}
.talk_name{
 display: flex;
}
.talk_name p:nth-child(1){
    width: 50%;
    text-align: left;
}
.talk_name p:nth-child(2){
    width: 50%;
    text-align: right;
}
.tx{
    max-width: 50px;
    border-radius: 50%;
    text-align: left;
}

.content{
    text-align: left;
    font-size: 17px;
    text-indent: 2em;
    margin-left: 20px;
    line-height: 30px;
    letter-spacing: 2px;
}
.theme-title{
    display: flex;
}
.theme-title>p:nth-child(1){
    width: 10%;
}
.theme-title>p:nth-child(1) img{
    max-width: 50px;
    border-radius: 50%;
}
.theme-title>p:nth-child(2){
    width: 70%;
    text-align: left;
}
.theme-title>p:nth-child(3){
    width: 20%;
}
.liuyan{
    background-color: rgb(110, 94, 206);
    border-radius: 50%;
    color: #fff;
    width: 60px;
    height: 60px;
    position: fixed;
    top: 500px;
    right: 50px;
}
.myliuyan{
    width: 400px;
}
</style>